<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" top="30vh" @close.native="cancel" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="分类维度：" prop="test1">
          <el-select v-model="form.test1">
            <el-option v-for="item in arr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属父级：" prop="test2" v-if="isShowParent">
          {{ form.test2 }}{{ treeData }}
          <el-cascader style="width:100%" v-model="form.test2" :options="treeData" :props="{ value:'id',checkStrictly: true}"></el-cascader>
        </el-form-item>
        <el-form-item label="名称：" prop="test3">
          <el-input v-model="form.test3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        test1: '',
        test2: '',
        test3: '',
      },
      rules: {

      },
      title: '',
      arr: [],
      isShowParent: false,
      treeData: []
    }
  },
  methods: {
    show(obj) {
      this.dialogVisible = true;
      this.isShowParent = obj.isShowParent;
      this.title = obj.title;
      this.treeData = obj.treeData
      this.arr = obj.arr;
      this.form.test1 = obj.idIndex;
      this.form.test2 = Number(obj.id);


      if (obj.data) {
        this.form = Object.assign(this.form, obj.data)
      }
    },
    submitForm() {
      // this.$refs['ruleForm'].validate(valid => {
      //   if (valid) {
      //     if (this.form.id) {
      //       updateFeedback(this.form).then(() => {
      //         this.cancel()
      //       })
      //     } else {
      //       addFeedback(this.form).then(() => {
      //         this.cancel()
      //       })
      //     }
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.$emit('close')
    },
    handleChange(file) {
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      formData.append('pathType', file.name.split('.').pop())
      uploadFile(formData).then(res => {
        this.form.fileName = res.data.fileName
        this.form.fileOriginPath = res.data.filePath
        this.form.filePath = res.data.servicePath
      })
    },
    // 多次上传覆盖
    handleExceed(file) {
      this.$refs.uploadRef.clearFiles()
      this.handleChange(file[0])
    },
    closeFile() {
      if (this.form.fileOriginPath) {
        deleteFile({ files: [this.form.fileOriginPath] }).then(() => {
          this.form.fileName = ''
          this.form.fileOriginPath = ''
          this.form.filePath = ''
        })
      } else {
        this.form.fileName = ''
        this.form.fileOriginPath = ''
        this.form.filePath = ''
      }
    },

    lookLinkDialog(item) {
      if (item.filePath) {
        this.$message.success('正在下载文件，请稍后...')
        fetch(item.filePath).then(res => {
          res.blob().then(blob => {
            const blobUrl = window.URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.style.display = 'none'
            a.href = blobUrl
            a.download = item.fileName
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            window.URL.revokeObjectURL(blobUrl)
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  // :deep(.el-cascader-menu__wrap) {
  //   height: 240px !important;
  // }
</style>